<script setup>
import { reactive } from 'vue'
import { deptTreeSelect } from '@/api/system/user'

import { GetRawChecktAPI, GenerateInvoiceSubmitAPI } from '@/api/order/sale/order'
const { proxy } = getCurrentInstance()
// 封装 方法 字典查询
const props = defineProps({
  data: {
    type: Array,
    default: []
  },
  id: {
    type: String,
    default: ''
  }
})

/**
 * 状态参数
 */
const state = reactive({
  loading: false
})

/**
 * 表格数据
 */
const tableData = ref(props.data)

/**
 * 表单数据
 */
const ruleForm = reactive({ list: [] })
ruleForm.list = props.data
const rules = reactive({
  requirementDept: [{ required: true, message: '请选择需求部门', trigger: 'change' }],
  requirementDate: [{ required: true, message: '请选择需求日期', trigger: 'change' }]
})

const deptOptions = ref([])

/** 查询部门下拉树结构 */
const getDeptTree = async () => {
  const result = await deptTreeSelect()
  deptOptions.value = result.data
}
getDeptTree()

const ruleFormRef = ref(null)
/**
 * 列表枚举
 */
const column = ref([
  {
    label: '物料编码',
    prop: 'materialCode',
    width: '120'
  },
  {
    label: '物料名称',
    prop: 'materialName',
    width: '120'
  },
  {
    label: '规格型号',
    prop: 'specType',
    width: '220'
  },
  {
    label: '需求量',
    prop: 'quantityDemanded'
  },
  {
    label: '库存量',
    prop: 'stockNum'
  },
  {
    label: '已锁定量',
    prop: 'lockedQuantity'
  },
  {
    label: '可用量',
    prop: 'availableAmount'
  },
  // {
  //   label: '采购中',
  //   prop: 'inPurchasing'
  // },
  {
    label: '本次采购量',
    prop: 'thisPurchaseQuantity',
    width: '180'
  },
  // {
  //   label: '本次锁定量',
  //   prop: 'thisLockedQuantity',
  //   width: '180'
  // },
  {
    label: '操作',
    prop: 'x',
    width: '90'
  }
])

const emit = defineEmits(['reset', 'ok'])

/**
 * 删除
 */
const remove = record => {
  const index = ruleForm.list.findIndex(item => item.id == record.id)
  ruleForm.list.splice(index, 1)
}

const submit = async () => {
  try {
    const valid = await ruleFormRef.value.validate()
    if (!valid) return false
    ruleForm.id = props.id
    await GenerateInvoiceSubmitAPI(ruleForm)
    proxy.successMsg('操作成功')

    emit('ok')
  } catch {}

  // return ruleForm;
}
</script>
<template>
  <div class="app-container">
    <el-form
      inline
      scroll-to-error
      ref="ruleFormRef"
      class="demo-ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      label-position="right"
      status-icon
    >
      <el-form-item label="需求部门" prop="requirementDept">
        <el-tree-select
          v-model="ruleForm.requirementDept"
          :data="deptOptions"
          :props="{ value: 'id', label: 'label', children: 'children' }"
          value-key="id"
          placeholder="请选择归属部门"
          check-strictly
        />
      </el-form-item>

      <el-form-item label="需求日期" prop="requirementDate">
        <el-date-picker
          clearable
          v-model="ruleForm.requirementDate"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <!-- <el-form-item label="数量">
        <el-input type="number" :min="0" clearable v-model="ruleForm.number" />
      </el-form-item> -->
      <span class="rk">
        <el-form-item label="备注" prop="productionDate">
          <el-input :rows="3" type="textarea" clearable v-model="ruleForm.remark" placeholder="请填写备注" />
        </el-form-item>
      </span>
    </el-form>
    <!-- 明细项 -->
    <div class="flex-items-center flex-between">
      <div class="title">物料明细</div>
      <div class="flex-between">
        <el-button type="success" v-hasPermi="['order:sale:saleOrder:verificat']" @click="submit"
          >生成采购计划</el-button
        >
      </div>
    </div>
    <p-table :isSel="false" :loading="state.loading" :data="ruleForm.list" :column="column">
      <template #columnCell="{ column, record }">
        <!-- 本次采购量 -->
        <div v-if="column.prop == 'thisPurchaseQuantity'">
          <el-input clearable v-model="record.thisPurchaseQuantity" />
        </div>

        <!-- 本次锁定量 -->
        <div v-if="column.prop == 'thisLockedQuantity'">
          <el-input clearable v-model="record.thisLockedQuantity" />
        </div>

        <!-- 操作 -->
        <div v-if="column.prop == 'x'">
          <el-link type="danger" @click="remove(record)">删除 </el-link>
        </div>
      </template>
    </p-table>
  </div>
</template>

<style scoped lang="scss">
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
